<template>
  <el-row :gutter="16">
    <div class="c_t_item margin-top_10">
      <el-col :span="4" class="c_t_item_title"></el-col>
      <el-col :span="5" class="c_t_item_title" style="color: #f76161"
        >报警次数</el-col
      >
      <el-col :span="5" class="c_t_item_title" style="color: #05f4fc"
        >控制次数</el-col
      >
      <el-col :span="5" class="c_t_item_title" style="color: #d8b620"
        >非工作时间用电</el-col
      >
      <el-col :span="5" class="c_t_item_title" style="color: #56cba2"
        >总电量</el-col
      >
    </div>
    <div v-for="(data, index) in DataStatisticsListsplice" :key="index">
      <el-col
        :span="4"
        :class="index == 0 ? 'c_t_item_day' : 'c_t_item_senver'"
        >{{ data.day }}</el-col
      >
      <el-col
        :span="5"
        :class="index == 0 ? 'c_t_item_day' : 'c_t_item_senver'"
        :style="index == 0 ? 'color: #f76161' : 'c_t_item_senver'"
      >
        <div>{{ data.alarmsnumber }}</div>
        <div
          :style="index == 0 ? '' : 'display:none'"
          class="upOrDown"
          :class="
            data.alarmsnumber > DataStatisticsListp[0].alarmsnumber
              ? 'up'
              : 'down'
          "
        >
          <i
            :class="
              data.alarmsnumber > DataStatisticsListp[0].alarmsnumber
                ? 'el-icon-top'
                : 'el-icon-bottom'
            "
          ></i>
          {{
            (
              (data.alarmsnumber / DataStatisticsListp[0].alarmsnumber) *
              100
            ).toFixed(0)
          }}%
        </div>
        <!-- {{
          data.alarmsnumber| Comparison(DataStatisticsListp[0].alarmsnumber, index)
        }} -->
      </el-col>
      <el-col
        :span="5"
        :class="index == 0 ? 'c_t_item_day' : 'c_t_item_senver'"
        :style="index == 0 ? 'color: #05f4fc' : 'c_t_item_senver'"
      >
        {{ data.controlnumber }}
        <div
          :style="index == 0 ? '' : 'display:none'"
          class="upOrDown"
          :class="
            data.controlnumber > DataStatisticsListp[0].controlnumber
              ? 'up'
              : 'down'
          "
        >
          <i
            :class="
              data.controlnumber > DataStatisticsListp[0].controlnumber
                ? 'el-icon-top'
                : 'el-icon-bottom'
            "
          ></i>
          {{
            (
              (data.controlnumber / DataStatisticsListp[0].controlnumber) *
              100
            ).toFixed(0)
          }}%
        </div>
      </el-col>
      <el-col
        :span="5"
        :class="index == 0 ? 'c_t_item_day' : 'c_t_item_senver'"
        :style="index == 0 ? 'color: #d8b620' : 'c_t_item_senver'"
      >
        {{ data.noworkelectricity }}
        <div
          :style="index == 0 ? '' : 'display:none'"
          class="upOrDown"
          :class="
            data.noworkelectricity > DataStatisticsListp[0].noworkelectricity
              ? 'up'
              : 'down'
          "
        >
          <i
            :class="
              data.noworkelectricity > DataStatisticsListp[0].noworkelectricity
                ? 'el-icon-top'
                : 'el-icon-bottom'
            "
          ></i>
          {{
            (
              (data.noworkelectricity /
                DataStatisticsListp[0].noworkelectricity) *
              100
            ).toFixed(0)
          }}%
        </div>
      </el-col>
      <el-col
        :span="5"
        :class="index == 0 ? 'c_t_item_day' : 'c_t_item_senver'"
        :style="index == 0 ? 'color: #56cba2' : 'c_t_item_senver'"
      >
        {{ data.totalpower }}
        <div
          :style="index == 0 ? '' : 'display:none'"
          class="upOrDown"
          :class="
            data.totalpower > DataStatisticsListp[0].totalpower ? 'up' : 'down'
          "
        >
          <i
            :class="
              data.totalpower > DataStatisticsListp[0].totalpower
                ? 'el-icon-top'
                : 'el-icon-bottom'
            "
          ></i>
          {{
            (
              (data.totalpower / DataStatisticsListp[0].totalpower) *
              100
            ).toFixed(0)
          }}%
        </div>
      </el-col>
    </div>
  </el-row>
</template>
<script>
import ajax from "@/utils/ajax";
export default {
  data() {
    return {
      DataStatisticsListp: [],
      DataStatisticsList: [
        {
          day: "今天",
          alarmsnumber: 123,
          controlnumber: 123,
          noworkelectricity: 123,
          totalpower: 123,
        },
        {
          day: "昨天",
          alarmsnumber: 215,
          controlnumber: 112,
          noworkelectricity: 73,
          totalpower: 112,
        },
        {
          day: "近7天",
          alarmsnumber: 1234,
          controlnumber: 1234,
          noworkelectricity: 1234,
          totalpower: 1234,
        },
        {
          day: "近30天",
          alarmsnumber: 12345,
          controlnumber: 12345,
          noworkelectricity: 12345,
          totalpower: 12345,
        },
      ],
    };
  },
  computed: {
    DataStatisticsListsplice() {
      this.DataStatisticsListp = this.DataStatisticsList.splice(1, 1);
      return this.DataStatisticsList;
    },
  },
  filters: {},
  created() {},

  mounted() {
    this.getDataStatisticsList();
  },
  methods: {
    getDataStatisticsList(){
      ajax.get({
        url: this.$API.getRecentData,
        data: {},
        success: (response) => {
          let self = this
         self.DataStatisticsList=response.data
        },
      });
    }
  },
};
</script>
<style scoped>
.margin-top_10 {
  margin-top: 10px;
}
* {
  box-sizing: border-box;
}
.c_t_item {
  /* // text-align: center; */
  color: #ffffff;
}
.c_t_item_title {
  font-size: 18px;
  height: 20px;
}
.float_left {
  width: 70px;
  /* // text-align: center; */
}
.c_t_item_day {
  font-size: 30px;
  margin-top: 16px;
  display: flex;
}
.c_t_item_senver {
  margin-top: 16px;
  display: flex;
}
.c_t_item_thirty {
  margin-top: 16px;
  display: flex;
}
.upOrDown {
  font-size: 16px;
  float: right;
  line-height: 33px;
}
.up {
  color: #d82a2b;
}
.down {
  color: #05aa31;
}
</style>